<template>
	<view class="forget">
	  <view class="content">
		<!-- 主体 -->
		<view class="main">
		  <view class="tips">若你忘记了密码，可在此重置新密码。</view>
		  <wInput
			v-model="phoneData"
			type="text"
			maxlength="11"
			placeholder="请输入手机号码"
		  ></wInput>
		  <wInput
			v-model="passData"
			type="password"
			maxlength="11"
			placeholder="请输入新密码"
			isShowPass
		  ></wInput>
		  
		  <wInput
			v-model="verCode"
			type="number"
			maxlength="4"
			placeholder="验证码"
			isShowCode
			codeText="获取重置码"
			setTime="30"
			ref="runCode"
			@setCode="getVerCode"
		  ></wInput>
		</view>
		
		<wButton 
		  class="wbutton"
		  text="重置密码"
		  :rotate="isRotate" 
		  @click="startRePass"
		></wButton>
	  </view>
	</view>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import wInput from '../../components/watch-login/watch-input.vue'
  import wButton from '../../components/watch-login/watch-button.vue'
  
  // 手机号码
  const phoneData = ref('')
  // 密码
  const passData = ref('')
  // 验证码
  const verCode = ref('')
  // 按钮旋转状态
  const isRotate = ref(false)
  // 验证码组件引用
  const runCode = ref(null)

	// 获取验证码方法
  	const getVerCode = () => {
	if (phoneData.value.length != 11) {
	  uni.showToast({
		icon: 'none',
		position: 'bottom',
		title: '手机号不正确'
	  })
	  return false
	}
	console.log("获取验证码")
	runCode.value.$emit('runCode')
	
	uni.showToast({
	  icon: 'none',
	  position: 'bottom',
	  title: '模拟倒计时触发'
	})
	
	setTimeout(() => {
	  runCode.value.$emit('runCode', 0)
	  uni.showToast({
		icon: 'none',
		position: 'bottom',
		title: '模拟倒计时终止'
	  })
	}, 3000)
  	}
  	// 重置密码方法
  	const startRePass = () => {
	if(isRotate.value) {
	  return false
	}
	if (phoneData.value.length != 11) {
	  uni.showToast({
		icon: 'none',
		position: 'bottom',
		title: '手机号不正确'
	  })
	  return false
	}
	if (passData.value.length < 6) {
	  uni.showToast({
		icon: 'none',
		position: 'bottom',
		title: '密码不正确'
	  })
	  return false
	}
	if (verCode.value.length != 4) {
	  uni.showToast({
		icon: 'none',
		position: 'bottom',
		title: '验证码不正确'
	  })
	  return false
	}
	
	console.log("重置密码成功")
	isRotate.value = true
	setTimeout(() => {
	  isRotate.value = false
	}, 3000)
  	}
  </script>
  
  <style>
  @import url("../../components/watch-login/css/icon.css");
  @import url("../../components/watch-login/css/main.css");
  </style>